<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <uni-nav-bar 
      title="审批管理" 
      left-icon="left" 
      right-icon="search"
      @clickLeft="goBack"
      @clickRight="showSearch"
      :fixed="true"
      :status-bar="true"
      background-color="#4980FF"
      color="#FFFFFF">
    </uni-nav-bar>

    <!-- 搜索栏 -->
    <uni-search-bar 
      v-if="showSearchBar"
      v-model="searchKeyword" 
      placeholder="搜索审批内容" 
      @confirm="onSearch"
      @cancel="hideSearch"
      cancelButton="取消"
      radius="100"
      bgColor="#FFFFFF">
    </uni-search-bar>

    <!-- 标签页 -->
    <uni-segmented-control 
      :current="activeTab" 
      :values="tabs" 
      @clickItem="handleTabClick"
      style-type="text"
      active-color="#4980FF">
    </uni-segmented-control>

    <!-- 统计卡片 -->
    <uni-section title="审批统计" type="line">
      <uni-grid :column="3" :highlight="true" @change="onStatClick">
        <uni-grid-item v-for="(stat, index) in approvalStats" :key="index">
          <view class="stat-item">
            <uni-icons :type="stat.icon" size="24" :color="stat.color"></uni-icons>
            <text class="stat-number">{{ stat.count }}</text>
            <text class="stat-label">{{ stat.label }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>

    <!-- 审批列表 -->
    <uni-section title="审批列表" type="line">
      <uni-list>
        <uni-list-item 
          v-for="(item, index) in filteredApprovalList" 
          :key="index"
          :title="`${item.initiator}发起的【${item.type}】审批`"
          :note="`项目：${item.project} | 合同：${item.contract}`"
          :rightText="item.createTime"
          :showArrow="true"
          :showBadge="true"
          :badge-text="item.status.text"
          :badge-type="getStatusType(item.status.type)"
          @click="getApprovalProcess(item)">
          <template v-slot:header>
            <view class="item-avatar">
              <uni-icons type="person-filled" size="20" color="#4980FF"></uni-icons>
            </view>
          </template>
          <template v-slot:footer>
            <uni-tag 
              :text="item.status.text" 
              :type="getStatusType(item.status.type)"
              size="small">
            </uni-tag>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-section>

    <!-- 空状态 -->
    <uni-empty 
      v-if="filteredApprovalList.length === 0"
      text="暂无审批数据"
      mode="data">
    </uni-empty>

    <!-- 加载更多 -->
    <uni-load-more 
      v-if="filteredApprovalList.length > 0"
      :status="loadMoreStatus"
      :content-text="loadMoreText"
      @clickLoadMore="loadMore">
    </uni-load-more>

    <!-- 悬浮操作按钮 -->
    <uni-fab 
      :pattern="fabPattern"
      :content="fabContent"
      :horizontal="horizontal"
      :vertical="vertical"
      @fabClick="fabClick">
    </uni-fab>

    <!-- 筛选弹窗 -->
    <uni-popup 
      ref="filterPopup" 
      type="bottom" 
      background-color="#fff">
      <view class="filter-content">
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <uni-icons type="close" size="20" @click="closeFilter"></uni-icons>
        </view>
        <view class="filter-body">
          <uni-data-select
            v-model="filterData.status"
            :localdata="statusOptions"
            placeholder="请选择状态"
            label="审批状态">
          </uni-data-select>
          <uni-data-select
            v-model="filterData.type"
            :localdata="typeOptions"
            placeholder="请选择类型"
            label="审批类型">
          </uni-data-select>
          <uni-datetime-picker
            v-model="filterData.dateRange"
            type="daterange"
            placeholder="请选择日期范围"
            label="时间范围">
          </uni-datetime-picker>
        </view>
        <view class="filter-footer">
          <uni-button type="default" @click="resetFilter">重置</uni-button>
          <uni-button type="primary" @click="applyFilter">确定</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSearchBar: false,
      searchKeyword: '',
      tabs: ['待我审批', '审批记录', '我的申请'],
      activeTab: 0,
      approvalStats: [
        { 
          label: '待审批', 
          count: 8, 
          icon: 'notification', 
          color: '#FF6B6B' 
        },
        { 
          label: '已审批', 
          count: 156, 
          icon: 'checkmarkempty', 
          color: '#4ECDC4' 
        },
        { 
          label: '我的申请', 
          count: 23, 
          icon: 'paperplane', 
          color: '#4980FF' 
        }
      ],
      approvalList: [
        {
          id: 1,
          initiator: '张三',
          type: '设备进场',
          project: 'MT-CY六标',
          contract: '施工承包合同',
          createTime: '2024-05-05 15:25',
          status: { type: 'pending', text: '待审批' }
        },
        {
          id: 2,
          initiator: '李四',
          type: '物料申请',
          project: 'MT-CY六标',
          contract: '施工承包合同',
          createTime: '2024-05-05 14:30',
          status: { type: 'approved', text: '已同意' }
        },
        {
          id: 3,
          initiator: '王五',
          type: '设备出场',
          project: 'MT-CY六标',
          contract: '施工承包合同',
          createTime: '2024-05-05 13:15',
          status: { type: 'rejected', text: '已驳回' }
        },
        {
          id: 4,
          initiator: '赵六',
          type: '加油申请',
          project: 'MT-CY六标',
          contract: '施工承包合同',
          createTime: '2024-05-05 12:00',
          status: { type: 'pending', text: '待审批' }
        },
        {
          id: 5,
          initiator: '钱七',
          type: '周期结算',
          project: 'MT-CY六标',
          contract: '施工承包合同',
          createTime: '2024-05-05 11:45',
          status: { type: 'approved', text: '已同意' }
        }
      ],
      fabPattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#4980FF'
      },
      fabContent: [
        {
          iconPath: '/static/fab/refresh.png',
          selectedIconPath: '/static/fab/refresh.png',
          text: '刷新',
          active: false
        },
        {
          iconPath: '/static/fab/filter.png',
          selectedIconPath: '/static/fab/filter.png',
          text: '筛选',
          active: false
        },
        {
          iconPath: '/static/fab/add.png',
          selectedIconPath: '/static/fab/add.png',
          text: '新建',
          active: false
        }
      ],
      horizontal: 'right',
      vertical: 'bottom',
      loadMoreStatus: 'more',
      loadMoreText: {
        contentdown: '上拉显示更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      },
      filterData: {
        status: '',
        type: '',
        dateRange: []
      },
      statusOptions: [
        { value: '', text: '全部状态' },
        { value: 'pending', text: '待审批' },
        { value: 'approved', text: '已同意' },
        { value: 'rejected', text: '已驳回' }
      ],
      typeOptions: [
        { value: '', text: '全部类型' },
        { value: 'equipment', text: '设备相关' },
        { value: 'material', text: '物料相关' },
        { value: 'fuel', text: '加油相关' },
        { value: 'settlement', text: '结算相关' }
      ]
    }
  },
  computed: {
    filteredApprovalList() {
      let list = this.approvalList
      
      // 搜索过滤
      if (this.searchKeyword) {
        list = list.filter(item => 
          item.initiator.includes(this.searchKeyword) ||
          item.type.includes(this.searchKeyword) ||
          item.project.includes(this.searchKeyword)
        )
      }
      
      // 状态过滤
      if (this.filterData.status) {
        list = list.filter(item => item.status.type === this.filterData.status)
      }
      
      // 类型过滤
      if (this.filterData.type) {
        list = list.filter(item => {
          const typeMap = {
            equipment: ['设备进场', '设备出场'],
            material: ['物料申请'],
            fuel: ['加油申请'],
            settlement: ['周期结算']
          }
          return typeMap[this.filterData.type]?.includes(item.type)
        })
      }
      
      return list
    }
  },
  methods: {
    handleTabClick(e) {
      this.activeTab = e.currentIndex
      this.updateApprovalList()
    },
    showSearch() {
      this.showSearchBar = true
    },
    hideSearch() {
      this.showSearchBar = false
      this.searchKeyword = ''
    },
    onSearch() {
      uni.showToast({
        title: `搜索: ${this.searchKeyword}`,
        icon: 'none'
      })
    },
    getApprovalProcess(item) {
      uni.navigateTo({
        url: `/pages/approvalProcess/index?id=${item.id}`
      })
    },
    goBack() {
      uni.navigateBack()
    },
    getStatusType(statusType) {
      switch(statusType) {
        case 'pending':
          return 'warning'
        case 'approved':
          return 'success'
        case 'rejected':
          return 'error'
        default:
          return 'primary'
      }
    },
    updateApprovalList() {
      // 根据当前标签页更新审批列表
      uni.showLoading({ title: '加载中...' })
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    },
    onStatClick(e) {
      const stat = this.approvalStats[e.detail.index]
      uni.showToast({
        title: `查看${stat.label}`,
        icon: 'none'
      })
    },
    fabClick(e) {
      const item = e.item
      switch(item.text) {
        case '刷新':
          this.refreshData()
          break
        case '筛选':
          this.showFilter()
          break
        case '新建':
          this.createNewApproval()
          break
      }
    },
    refreshData() {
      uni.showLoading({ title: '刷新中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '数据已刷新',
          icon: 'success'
        })
      }, 1000)
    },
    createNewApproval() {
      uni.showActionSheet({
        itemList: ['设备进场申请', '物料申请', '设备出场申请', '加油申请'],
        success: (res) => {
          const types = ['设备进场', '物料', '设备出场', '加油']
          uni.showToast({
            title: `新建${types[res.tapIndex]}申请`,
            icon: 'none'
          })
        }
      })
    },
    loadMore() {
      this.loadMoreStatus = 'loading'
      setTimeout(() => {
        this.loadMoreStatus = 'noMore'
      }, 1000)
    },
    showFilter() {
      this.$refs.filterPopup.open()
    },
    closeFilter() {
      this.$refs.filterPopup.close()
    },
    resetFilter() {
      this.filterData = {
        status: '',
        type: '',
        dateRange: []
      }
    },
    applyFilter() {
      this.closeFilter()
      uni.showToast({
        title: '筛选已应用',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #F5F7FA;
  min-height: 100vh;
  padding-top: 88px; // 为固定导航栏留出空间
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  gap: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #4980FF;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.item-avatar {
  width: 40px;
  height: 40px;
  background-color: rgba(73, 128, 255, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.filter-content {
  padding: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.filter-body {
  margin-bottom: 20px;
}

.filter-footer {
  display: flex;
  gap: 12px;
}
</style> 